<template>
  <div class="app-container">
        <div class="cbox">
          <el-form class="form" ref="flt" :rules="rules" label-width="13rem" size="mini">
            <el-row :gutter="15" class="row">
              <el-col :span="4">
                    <el-form-item prop="code" label="船公司代码：" label-width="12rem">
                      <el-input maxlength="32"  v-model="from.code" clearable></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="4">
                    <el-form-item prop="name" label="船公司中文名称：">
                      <el-input maxlength="32"  v-model="from.name" clearable></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item label-width="10px">
                  <el-button @click="searchType" type="primary">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-row :gutter="10" class="btn-area">
            <el-col :span="24">
              <el-button size="mini" type="success" plain @click="add">新增船公司</el-button>
              <el-button size="mini" type="primary" plain @click="del('diong')">编辑船公司</el-button>
              <el-button size="mini" type="danger" plain @click="examine">删除船公司</el-button>
            </el-col>
        </el-row>
        <div class="table" ref="topType">
              <div class="inner" ref="inner">
                <el-table
                    :data="DetailedData"
                    border
                    :height="650"
                    :header-cell-style="{ textAlign: 'center' }"
                    highlight-current-row
                    @row-dblclick='rowdbClick'
                    @row-click="rowClick">
                    <el-table-column size="mini" type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                    <el-table-column size="mini" prop="splCode" show-overflow-tooltip label="船公司代码"></el-table-column>
                    <el-table-column size="mini" prop="splName" show-overflow-tooltip label="船公司中文名称"></el-table-column>
                    <el-table-column size="mini" prop="splShortname" show-overflow-tooltip label="船公司简称"></el-table-column>
                    <el-table-column size="mini" prop="splEname" show-overflow-tooltip label="船公司英文名称"></el-table-column>
                    <el-table-column size="mini" prop="splInsertuser" show-overflow-tooltip label="创建员工"></el-table-column>
                    <el-table-column size="mini" align="center" prop="splInsertdt" show-overflow-tooltip label="创建时间"></el-table-column>
                    <el-table-column size="mini" prop="splLstupduser" show-overflow-tooltip label="最后修改员工"></el-table-column>
                    <el-table-column size="mini" align="center" prop="splLstupddt" show-overflow-tooltip label="最后修改时间"></el-table-column>
                </el-table>
              </div>
        </div>
          <!-- 分页 -->
        <el-pagination
          class="pagination"
          small
          background
          ref="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.pageSize"
          :layout="Pagination.layout"
          :total="Pagination.total"
        ></el-pagination>
        <!-- 弹出框 新增 编辑 -->
        <el-dialog
        v-el-drag-dialog
          width="40%"
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          :close-on-click-modal="false">
              <el-form  label-width="14rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row>

                      <el-col :span="12">
                        <el-form-item prop="splCode" label="船公司代码：">
                          <el-input maxlength="6" :disabled='disabledA' @change="uppercase('splCode')"  v-model="xzData.splCode" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="splName" label="船公司中文名称：">
                          <el-input maxlength="32" :disabled='disabled'  v-model="xzData.splName" clearable></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item prop="splEname" label="船公司英文名称：">
                          <el-input maxlength="32" :disabled='disabled'  v-model="xzData.splEname" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="splShortname" label="船公司简称：">
                          <el-input maxlength="32" :disabled='disabled'  v-model="xzData.splShortname" clearable></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="10">
                        <el-form-item prop="splUrl" label="图片地址：">
                          <el-input maxlength="13" :disabled='disabled'   v-model="xzData.splUrl" clearable></el-input>
                          <el-upload
                            :disabled='disabled'
                            action=""
                            :http-request="uploadImage"
                            :show-file-list="false"
                            class="upload-demo">
                            <div class="box">
                              <el-button size="small" :disabled='disabled'  type="primary">预览</el-button>
                            </div>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="splRemark" label="备注：">
                          <el-input maxlength="32" :disabled='disabled' type="textarea" v-model="xzData.splRemark" clearable></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button size="mini" type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
                      <el-button size="mini"  @click="close">关闭</el-button>
                  </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  ShippingCompanyListA,
  addShippingCompanyA,
  editShippingCompanyA,
  delShippingCompanyA,
  addImg
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      disabledA:false,
      disabled:false,
      from:{
        code:'',
        name:'',
      },
      item:{
        item:true,
        itemA:false
      },
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      see:true, //保存按钮
      DetailedData:[], //主列表的数据
      xzData:[],// 传给新增 编辑弹出框的数据
      itemData:[],//当前行数据
      //表单验证 新增 编辑
      addRules:{
        splCode:[
          { required: true, message: '请填写船公司代码', trigger:'blur'},
          {
            pattern: /^([^\u4e00-\u9fa5])+$/,
            message: '禁止输入中文',
            trigger: 'change'
          }
        ],
        splName:[
          { required: true, message: '请填写中文名称', trigger:'blur'}
        ],
        splUrl:[
          { required: true, message: '请填写图片地址', trigger:['blur','change']}
        ],
        splShortname:[
          { required: true, message: '请填写船公司简称', trigger:'blur'}
        ],
      },
    }
  },
  created(){

  },
  mounted(){
    // this.dataList()
    this.refreshList()
  },
  methods:{
    // 上传图片地址
    uploadImage ({ file }) {
      addImg( file ).then(res => {
        this.xzData.splUrl = res.data.nowPath
      })
    },
    //转换大写
    uppercase(key) {
      this.xzData[key] = this.xzData[key].toUpperCase()
    },
    //列表数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      ShippingCompanyListA({
        splCode:this.from.code,
        splName:this.from.name,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data
        updateTotal(Number(response.total))

      })

    },

    // 点击搜索
    searchType(){
      this.searchList()
    },
    //新增
    add(){
      this.addText='新增船公司信息'
      this.diong=''
      this.addShowA=true
      this.see = true
      this.disabledA=false
      this.disabled=false
      this.xzData = {
        splCode:'',
        splName:'',
        splEname:'',
        splShortname:'',
        splUrl:'',
      }
    },
    //编辑
    del(){
      if(Object.keys(this.itemData).length){
        this.xzData = this.itemData
        this.addText='编辑'
        this.diong='E'
        this.addShowA=true
        this.see = true
        this.disabledA=true
        this.disabled=false
      }else{
        this.$alert('请选择需要编辑的数据', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
    },
    //删除
    examine(){
      if (Object.keys(this.itemData).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        delShippingCompanyA({splId:this.itemData.splId}).then(res=>{
          if(res.success !== '1'){
            this.$message ({
              type: 'success',
              message: '删除失败'
            })
            return
          }else{
            this.$message ({
              type: 'success',
              message: '删除成功'
            })
            // this.dataList()
            this.searchList()
            this.close()
          }
        })
      }).catch(() => {})

    },
    //双击查看
    rowdbClick(row){
      this.addText='查看船公司信息'
      this.addShowA=true
      this.see=false
      this.xzData = row
      this.disabledA=true
      this.disabled=true
    },
    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            editShippingCompanyA(this.xzData).then(res=>{
              if(res.success !== '1'){
                this.$message ({
                  type: 'success',
                  message: '编辑失败'
                })
                return
              }else{
                // this.xzData = []
                this.$message ({
                  type: 'success',
                  message: '编辑成功'
                })
                // this.dataList()
                this.searchList()
                this.close()
              }
            })
          }else{
            addShippingCompanyA(this.xzData).then(res=>{
              if(res.success !== '1'){
                this.$message ({
                  type: 'success',
                  message: '添加失败'
                })
              }else{
                this.$message ({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                // this.dataList()
                this.searchList()
                this.$refs[xzData].resetFields()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    //获取当前行数据
    rowClick(row){
      this.itemData= row
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
    }
  }
}
</script>

<style  lang="scss" scoped>
::v-deep .el-upload{
  display: block;
}
.box{
  position: absolute;
  right: -60px;
  top:0;
}
.el-select {
  width: 100%;
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
